<template>
  <div class="logs-record">
    <div class="app-container">
      <div class="mainbox">
        <Header :header-name="$route.meta.title" />

        <div class="logs-record-body">

          <!-- 搜索板块 -->
          <el-form ref="form" :model="form" inline label-width="80px" class="search-form">
            <el-form-item prop="systemId">
              <el-select v-model="form.systemId" clearable placeholder="请选择系统名称">
                <el-option
                  v-for="(item, index) in systemIdList"
                  :key="index"
                  :label="item.systemCode + ' / ' + item.systemName"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
            <el-form-item prop="sceneName">
              <el-input v-model="form.sceneName" placeholder="请输入场景名称" :maxlength="50" />
            </el-form-item>
            <el-form-item prop="searchTime">
              <el-date-picker
                v-model="form.searchTime"
                type="datetimerange"
                range-separator="至"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                value-format="yyyy-MM-dd HH:mm:ss"
              />
            </el-form-item>

            <el-form-item class="query-action">
              <el-button type="primary" :loading="loading" :disabled="loading" @click="getTableData"> 查询 </el-button>
              <el-button :loading="loading" :disabled="loading" @click="resetBtn"> 重置 </el-button>
            </el-form-item>
          </el-form>

          <!-- 表格数据 -->
          <FlexTable
            v-loading="loading"
            border
            :data="tableData"
            :columns="columnsOptions"
          />

          <el-pagination
            :page-size="pagination.pageSize"
            :current-page.sync="pagination.pageNo"
            layout="prev, pager, next, jumper"
            :total="pagination.totalPage"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />

        </div>
      </div>
    </div>

    <el-dialog
      width="800px"
      title="执行详情"
      :visible.sync="dialogVisible"
    >
      <div class="search-form">
        <el-select v-model="dialogTaskSts" clearable placeholder="请选择执行状态">
          <el-option
            v-for="(item, index) in dictOptions.detailTaskSts"
            :key="index"
            :label="item.label"
            :value="item.value"
          />
        </el-select>

        <el-date-picker
          v-model="dialogSearchTime"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          value-format="yyyy-MM-dd HH:mm:ss"
        />

        <el-button type="primary" :loading="dialogLoading" :disabled="dialogLoading" @click="dialogSearchBtn"> 搜索 </el-button>
      </div>
      <FlexTable
        v-loading="dialogLoading"
        border
        :data="dialogTableData"
        :columns="dialogColumnsOptions"
      />

      <el-dialog
        width="700px"
        title="执行明细"
        :visible.sync="innerVisible"
        append-to-body
      >
        <div style="border: 1px solid #ddd; padding: 10px; max-height: 400px; overflow-y: auto;">
          {{ particulars }}
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="innerVisible = false">关 闭</el-button>
        </span>
      </el-dialog>
      <el-pagination
        :page-size="dialogPagination.pageSize"
        :current-page.sync="dialogPagination.pageNo"
        layout="prev, pager, next, jumper"
        :total="dialogPagination.totalPage"
        @size-change="dialogHandleSizeChange"
        @current-change="dialogHandleCurrentChange"
      />

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">关 闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { executionPageApi, executionDetailPageApi } from '@/api/serviceManage/serviceAdaptation'
import { getSystemListApi } from '@/api/serviceManage/requestPartyServiceManage'
import dictMixin from '@/utils/mixins/dict'
export default {
  name: 'LogsRecord',

  mixins: [
    dictMixin(['taskSts@Local', 'detailTaskSts@Local'])
  ],

  data () {
    return {
      dialogVisible: false,
      loading: false,
      tableData: [],
      columnsOptions: [
        { label: '系统名称', prop: 'systemName' },
        { label: '场景名称', prop: 'sceneName' },
        { label: '通讯标识', prop: 'taskCode' },
        { label: '运行状态',
          customRender: scope => {
            return this.getDictText('taskSts', scope.row.taskSts)
          }
        },
        { label: '执行时间', prop: 'createTime' },
        { label: '执行时长(秒)', prop: 'executeTime' },
        { label: '操作', width: 200,
          customRender: (scope) => {
            return <el-button onClick={() => this.executingDetailBtn(scope.row)}> 执行详情 </el-button>
          }
        }
      ],
      form: {
        systemId: '',
        sceneName: '',
        searchTime: []
      },
      // 分页相关
      pagination: {
        pageNo: 1,
        pageSize: 10,
        totalPage: 0
      },
      // 执行详情分页相关
      dialogPagination: {
        pageNo: 1,
        pageSize: 10,
        totalPage: 0
      },
      dialogTaskSts: '',
      dialogSearchTime: [],
      dialogTableData: [],
      dialogLoading: false,
      dialogColumnsOptions: [
        { label: '执行时间', prop: 'createTime' },
        { label: '执行状态',
          customRender: scope => {
            return this.getDictText('detailTaskSts', scope.row.sts)
          }
        },
        { label: '执行组件',
          customRender: scope => {
            return this.getDictText('componentCode', scope.row.componentCode)
          }
        },
        { label: '执行明细',
          customRender: scope => {
            return <el-button onClick={() => this.showParticulars(scope.row)}> 执行明细 </el-button>
          }
        }
      ],
      logSceneId: '',
      systemIdList: [],
      // 执行明细
      particulars: '',
      innerVisible: false
    }
  },

  created () {
    this.getTableData()

    getSystemListApi()
      .then(({ code, data }) => {
        if (code === '00000') {
          this.systemIdList = data
        }
      })
  },

  methods: {
    // 获取表格数据
    getTableData () {
      this.loading = true
      executionPageApi({
        systemId: this.form.systemId,
        sceneName: this.form.sceneName,
        pageNo: this.pagination.pageNo,
        pageSize: this.pagination.pageSize,
        searchBeginTime: this.form.searchTime && this.form.searchTime.length ? this.form.searchTime[0] : '',
        searchEndTime: this.form.searchTime && this.form.searchTime.length ? this.form.searchTime[1] : ''
      }).then(({ code, data }) => {
        if (code === '00000') {
          this.tableData = data.rows
          this.pagination.totalPage = data.totalRows
        }
      }).finally(() => {
        this.loading = false
      })
    },

    // 详情按钮
    detailBtn (row) {
      this.dialogVisible = true
    },

    // 重置按钮
    resetBtn () {
      this.$refs.form.resetFields()
      this.getTableData()
    },

    // 分页操作
    handleSizeChange (val) {
      this.pagination.pageSize = val
      this.getTableData()
    },
    handleCurrentChange (val) {
      this.pagination.pageNo = val
      this.getTableData()
    },

    // 执行详情搜索
    dialogSearchBtn () {
      this.dialogPagination.pageNo = 1
      this.executingDetailBtn()
    },

    // 执行明细按钮
    showParticulars (row) {
      this.particulars = row.detail
      this.innerVisible = true
    },

    // 执行详情按钮
    executingDetailBtn (row) {
      if (row) this.logSceneId = row.id
      this.dialogVisible = true
      this.getDialogTableData()
    },

    getDialogTableData () {
      this.dialogLoading = true
      executionDetailPageApi({
        logSceneId: this.logSceneId,
        sts: this.dialogTaskSts,
        pageNo: this.dialogPagination.pageNo,
        pageSize: this.dialogPagination.pageSize,
        searchBeginTime: this.dialogSearchTime && this.dialogSearchTime.length ? this.dialogSearchTime[0] : '',
        searchEndTime: this.dialogSearchTime && this.dialogSearchTime.length ? this.dialogSearchTime[1] : ''
      })
        .then(({ code, data }) => {
          this.dialogTableData = data.rows
          this.dialogPagination.totalPage = data.totalRows
        })
        .finally(() => {
          this.dialogLoading = false
        })
    },

    // 执行详情弹框分页操作
    dialogHandleSizeChange (val) {
      this.dialogPagination.pageSize = val
      this.getDialogTableData()
    },
    dialogHandleCurrentChange (val) {
      this.dialogPagination.pageNo = val
      this.getDialogTableData()
    }
  }
}
</script>

<style lang="scss" scoped>
  .logs-record {
    background: #F2F2F2;

    &-body {
      background: #fff;
      margin-top: 10px;
      padding: 20px;
      height: calc(100vh - 254px);
      overflow-y: auto;
    }
    .el-pagination {
      text-align: right;
      margin-top: 20px;
    }

    ::v-deep .el-dialog__body {
      padding: 10px;
      .el-table {
        margin-top: 20px;
      }

      .el-date-editor {
        margin: 0 10px;
      }
    }
    ::v-deep .el-dialog__footer {
      padding: 10px 20px !important;
    }
  }
</style>
